<template>
  <div class="IssueHeader">
    <span class="selectspan">
      状态
      <el-select
        v-model="state"
        class="selectstate"
        placeholder="Select"
        size="large"
        style="width: 120px; margin-right: 20px"
        @change="selectstate"
      >
        <el-option
          v-for="item in states"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      优先级
      <el-select
        v-model="priority"
        class="selectpriority"
        placeholder="Select"
        size="large"
        style="width: 120px"
        @change="selectpriority"
      >
        <el-option
          v-for="item in prioritys"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </span>
    <el-button class="newissue" type="primary" size="large" @click="newissue"
      >新建工单
    </el-button>
  </div>
</template>
<script>
export default {
  name: "IssueHeader",
  data() {
    return {
      state: 1,
      priority: 1,
      prioritys: [
        {
          value: 1,
          label: "不指定",
        },
        {
          value: 2,
          label: "不重要",
        },
        {
          value: 3,
          label: "次要",
        },
        {
          value: 4,
          label: "主要",
        },
        {
          value: 5,
          label: "严重",
        },
      ],
      states: [
        {
          value: 1,
          label: "所有的",
        },
        {
          value: 2,
          label: "代办的",
        },
        {
          value: 3,
          label: "进行中",
        },
        {
          value: 4,
          label: "已完成",
        },
        {
          value: 5,
          label: "已拒绝",
        },
      ],
    };
  },
  created() {
    this.$emit("info", this.state, this.priority);
  },
  methods: {
    selectstate(val) {
      this.$emit("info", this.state, this.priority);
    },
    selectpriority(val) {
      this.$emit("info", this.state, this.priority);
    },
    newissue() {
      this.$router.push("addissue");
    },
  },
};
</script>
<style scoped>
.selectspan {
  font-size: 15px;
}
.IssueHeader {
  background-color: #f6f6f6;
  justify-content: space-between;
  display: flex;
  padding: 10px;
  vertical-align: middle;
}
</style>
